<template>
  <div class="app-container">
    <h2>上传组件</h2>
    <div>
      <h3>一、默认</h3>
      <WUpload v-model="fileList1"> </WUpload>
    </div>
    <div>
      <h3>二、限制类型，数量，大小</h3>
      <WUpload v-model="fileList2" accept=".pdf" :limit-count="3" :limit-size="200"> </WUpload>
    </div>
    <div>
      <h3>三、插槽（上传、提示语）</h3>
      <WUpload v-model="fileList3">
        <el-link type="primary" slot="default">点我上传</el-link>
        <div slot="tip" class="tip">
          <span class="tip">这是一段提示语...</span>
        </div>
      </WUpload>
    </div>
    <div>
      <h3>四、自定义列表</h3>
      <WUpload v-model="fileList4" show-custom-list> </WUpload>
    </div>
    <div>
      <h3>五、仅展示列表</h3>
      <WUpload v-model="fileList5" :show-upload="false" show-custom-list>
        <div></div>
      </WUpload>
    </div>
  </div>
</template>

<script>
import WUpload from '@/components/WComponents/WUpload/index.vue'

export default {
  name: 'testWUpload',
  components: { WUpload },
  data() {
    return {
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [{ name: 'aaa.png' }]
    }
  }
}
</script>

<style scoped lang="scss">
.tip {
  color: red;
}
</style>
